<!--
 * @Descripttion: 生产Dashboard
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-23 00:24:22
-->
<template>
  <div class="dashboard-container">
    <div
      v-for="produceGroup in Object.keys(produceGroupMap)"
      :key="produceGroup"
    >
      <h2 :class="[`group-title-${produceGroup}`]">
        {{
          $t(
            `page.dashboardManageArr.produceDashboard.outputCountArr.${produceGroup}`
          )
        }}
      </h2>
      <div :class="['dashboard-group', `dashboard-group-${produceGroup}`]">
        <template v-for="dataType in produceGroupMap[produceGroup]">
          <div class="dashboard-item">
            <ProduceCount
              :class="[`${dataType}-count`]"
              :type="dataType"
              :produceGroup="produceGroup"
              :count="
                dataType == produceDataTypeEnum.aoiAllYieldRate
                  ? -1
                  : produceDashboardParam.dataMap[produceDataKeyMap[dataType]]
                      ?.total || 0
              "
              @click="
                hanldeRowClick({
                  dataType,
                  dateValue: produceItemRef.get(dataType).getDateValue() || '',
                  isAll: true,
                })
              "
            />
            <!-- 总品质推移图 -->
            <TrendChartCard
              v-if="dataType == produceDataTypeEnum.aoiAllYieldRate"
              :dataType="produceDataTypeEnum.aoi"
            />
            <ProduceItem
              v-else
              :ref="(el) => setProduceItemRef(el, dataType)"
              :loading="produceDashboardParam.loading"
              :dataType="dataType"
              :dateType="produceDashboardParam.dateType"
              v-model:dataMap="
                produceDashboardParam.dataMap[produceDataKeyMap[dataType]]
              "
              @rowClick="hanldeRowClick"
            />
          </div>
        </template>
      </div>
    </div>
    <!-- 生成推移图 -->
    <TrendChartLayer ref="trendChartLayerRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from "vue";
import {
  produceDataKeyMap,
  produceGroupMap,
  produceDataTypeEnum,
} from "./index.type";
import { object_Inf } from "@/utils/typings/index.type";
import ProduceCount from "./produce-count/index.vue";
import ProduceItem from "./produce-item/index.vue";
import TrendChartLayer from "./produce-trendChart/trendChart-layer/index.vue";
import TrendChartCard from "./produce-trendChart/trendChart-card/index.vue";
import Dile_APi from "@/api";

/**
 * @Author: xzh
 * @Descripttion: 生产仪表单参数
 * @Param:
 */
let produceDashboardParam = reactive<object_Inf>({
  loading: false,
  dataMap: {},
});

/**
 * @Author: xzh
 * @Descripttion: 推移图实例
 * @Param:
 */
let trendChartLayerRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion: 生成item实例
 * @Param:
 */
let produceItemRef = ref<any>(new Map());

/**
 * @Author: xzh
 * @Descripttion: 设置生成itemRef
 * @Param:
 * @param {*} el
 * @param {*} dataType
 */
let setProduceItemRef = (el: any, dataType: string) =>
  !!el && produceItemRef.value.set(dataType, el);

/**
 * @Author: xzh
 * @Descripttion: 初始渲染
 * @Param:
 */
onMounted(() => {
  init();
});

/**
 * @Author: xzh
 * @Descripttion: 初始化加载
 * @Param:
 */
let init = async () => {
  let { loading, dataMap } = toRefs(produceDashboardParam);
  try {
    loading.value = true;
    //获取生成仪表盘数据
    let data = await Dile_APi.getProduceDashboard();
    Object.keys(data).forEach((x) => (dataMap.value[x] = data[x]));
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 行点击事件
 * @Param:
 * @param {*} row
 */
let hanldeRowClick = (param: object_Inf) => {
  trendChartLayerRef.value.init(param);
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  > div {
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);
  }
  .dashboard-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(25% - var(--item-gap)));
    justify-content: space-between;
    grid-gap: var(--item-gap);
    .dashboard-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: var(--item-gap);
    }
    &:is(.dashboard-group-quality) {
      grid-template-columns: calc(50% - var(--item-gap)) calc(
          50% - var(--item-gap)
        ) !important;
    }
  }
  h2 {
    color: #00bfbf;
    font-size: 2rem;
    font-weight: 600;
    &:is(.group-title-quality) {
      color: lightpink;
    }
    &:is(.group-title-cost) {
      color: lightskyblue;
    }
  }

  --item-gap: 0.5rem;
}
</style>
